<div id="root">

    <h1>导航栏</h1>
<qf-nav-bar left-arrow title="商品创建" @click-left="leftFn" @click-right="rightFn"></qf-nav-bar>

    <br><br>
    <hr>
    <h1>商品创建</h1>
    <qf-table  :state="false" ref="a"></qf-table>
    <qf-table  :state="false"></qf-table>
    <qf-table  :state="false"></qf-table>

    <br><br>
    <hr>
    <button @click="submitFn">获取数据</button>

    <br><br>
    <hr>
    <h1>按钮组件</h1>
    <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qfui.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script>
const vm = new Vue({
    el: "#root",
    data: {
    },
    methods:{
        submitFn(formData){
            alert('伪代码')
            console.log('表单数据:'),

            console.log(this.$refs.a.formData)
            },
            leftFn(){
                alert('返回左')},
            rightFn(){
                alert('返回右')

        }
    }
})
</script>